<template>
  <div class="user-create">
    <mu-sub-header>单个用户添加</mu-sub-header>
    <mu-form ref="form" :model="userForm" class="mu-demo-form">
      <mu-form-item label="用户名" help-text="建议使用姓名全拼" prop="username" :rules="usernameRules">
        <mu-text-field v-model="userForm.username" prop="username"></mu-text-field>
      </mu-form-item>
      <mu-form-item label="真实姓名" prop="realname" :rules="realnameRules">
        <mu-text-field v-model="userForm.realname" prop="realname"></mu-text-field>
      </mu-form-item>
      <mu-form-item label="密码" help-text="初始密码建议使用手机号" prop="password" :rules="passwordRules">
        <mu-text-field v-model="userForm.password" type="password" prop="password"></mu-text-field>
      </mu-form-item>
      <mu-form-item label="用户权限" prop="role">
        <mu-select v-model="userForm.role">
          <mu-option v-for="option in roleOptions" :key="option.value" :label="option.label" :value="option.value"></mu-option>
        </mu-select>
      </mu-form-item>
      <mu-form-item label="是否可用" prop="is_active">
        <mu-radio v-model="userForm.is_active" :value="false" label="否"></mu-radio>
        <mu-radio v-model="userForm.is_active" :value="true" label="是"></mu-radio>
      </mu-form-item>
      <mu-form-item>
        <mu-button color="primary" @click="submit">提交</mu-button>
        <mu-button @click="clear">重置</mu-button>
      </mu-form-item>
    </mu-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import api from '@/api'
import { encryptPassword } from '@/api/password-client'

export default {
  name: 'UserCreate',
  data() {
    return {
      usernameRules: [
        { validate: (val) => !!val, message: '必须填写用户名' }
      ],
      realnameRules: [
        { validate: (val) => !!val, message: '必须填写真实姓名' }
      ],
      passwordRules: [
        { validate: (val) => !!val, message: '必须填写密码' },
        { validate: (val) => val.length >= 3, message: '密码不能少于3位' }
      ],
      userForm: {
        username: '',
        realname: '',
        password: '',
        role: 1,
        is_active: true
      }
    }
  },
  computed: {
    ...mapGetters({
      publickey: 'publickey',
      roles: 'roles'
    }),
    roleOptions() {
      const options = [
        {
          value: 0,
          label: '无隶属'
        }
      ]
      for (const item of this.roles) {
        options.push({
          value: item.id,
          label: item.text
        })
      }
      return options
    }
  },
  methods: {
    submit() {
      this.$refs.form.validate().then((result) => {
        if (result) {
          this.createUser()
        }
      })
    },
    clear() {
      this.$refs.form.clear()
      this.userForm = {
        username: '',
        realname: '',
        password: '',
        role: 1,
        is_active: true
      }
    },
    async createUser() {
      try {
        const item = this.userForm
        const payload = encryptPassword(this.publickey, item.password)
        payload.role = item.role
        payload.is_active = item.is_active
        await api.createUser(item.username, item.realname, payload)
        this.$toast.success('创建成功')
        this.$emit('refresh')
      } catch (err) {
        this.$apiCatch(err)
      }
    }
  }
}
</script>

<style scoped>
.user-create {
  margin: 0 auto;
  width: 400px;
}
</style>
